<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模仿双向绑定</title>
</head>
<body>
<h1 id="name">{{name}}</h1>
<script src="observer.js"></script>
<script src="watcher.js"></script>
<script src="index.js"></script>
<script>
//    var Book={};
//    var name='';
    //通过object.definedProperty设置了对象book'的name，get就是读取数据时，触发的函数
    //set是设置数据的时候出发的函数
//    Object.defineProperty(Book,'name',{
//        set:function(value){
//            name=value;
//            console.log('你取了一个书名叫做'+value);
//        },
//        get:function(){
//            return "<"+name+">";
//        }
//    })

//    Book.name='VUE权威指南';
//    console.log(Book.name);
    //mvvm主要包含，数据变化更新视图，视图变化更新数据
    //关键在于data如何更新view，view更新data可以通过事件监听
    //如何知道数据变了呢，这时候我们可以用数据劫持来看，当他触发set函数的时候
    //就是数据变化了啊，所以我们需要放一点东西在这里面

    //现在说实现的过程
    //首先对数据进行劫持，然后需要设置一个监听器observer，用来监听所有的属性，属性有变化了就压告诉订阅者看是否需要更新，因为订阅者有很多个
    //所以我们要有个dep来收集这些订阅者，然后再监听器和订阅者之间进行统一管理，
    //接着需要有一个指令解析complie，对每个节点元素进行臊面和解析
    //将相关指令对应初始化成一个订阅者watcher，并替换模板数据或者绑定相应的函数
    //当订阅者收到响应属性的变化，就会执行对应的更新函数，从而更新视图
    //双向绑定的实现过程：
    //1.实现一个监听器，用来劫持监听所有的属性，如果有变动就通知订阅者
    //2.实现一个订阅者，可以收到属性的变化通知，并执行相应的函数，从而更新视图
    //3.实现一个解析器，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器

    //实现一个observer，数据监听器，核心办法是数据劫持，对所有属性进行监听，那就是递归所有属性值
    //对递归值进行数据劫持处理
//有个一个容器来存放这些订阅者

//需要将observer和watcher关联起来
function SelfVue(data,el,exp){
    this.data=data;
    observe(data);
    el.innerHTML=this.data[exp];//初始化模板数据的值
    new Watcher(this,exp,function(value){
        el.innerHTML=value;
    });
    return this;
}
var ele=document.querySelector("#name");
var selfVue=new SelfVue({
    name:'hello world'
},ele,'name');

window.setTimeout(function(){
    console.log('name 值改变了');
    selfVue.data.name='cnfoo';
},2000)




</script>
</body>
</html>